<template>
  <div class="swiper">
    <div class="swiper-item-container" :style="{width:(banner.length*100)+'%'}">
      <div class="swiper-item" v-for="item of banner" :key="item.image" :style="{width:(100/banner.length)+'%'}">
        <img :src="item.image" alt="">
      </div>
    </div>


    <div class="indicators">
      <ul>
        <li v-for="(item,index) of banner" @click="changeBanner(index)" :class="{active:index == activeIndex}"></li>
      </ul>
    </div>
  </div>
</template>

<script>
    export default {
        name: "Swiper",
      data(){
          return {
            activeIndex: 0,
          }
      },
      methods:{
        changeBanner(index) {
          const container = document.querySelector('.swiper-item-container')
          console.log(container);
          console.log(container.style);
          container.style.transform = `translate(${-25 * index}%,0)`


          this.activeIndex = index

        }
      },
      props:{
          banner:{

          }
      }
    }
</script>

<style scoped lang="less">
  .swiper {
    width: 100%;
    height: 195px;
    /*display: flex;*/
    /*flex-wrap: wrap;*/
    overflow: hidden;
    position: relative;

    .swiper-item {
      float: left;
      /*width: 100%;*/
      img {
        width: 100%;

      }
    }

    .indicators {
      position: absolute;
      bottom: 10px;
      left: 50%;
      transform: translate(-50%, 0);
      transition: transform 200ms;
      ul {
        display: flex;
        li {
          width: 10px;
          height: 10px;
          border-radius: 50%;
          background: #FFF;
          margin: 10px;
          list-style: none;
          &.active{
            background: #f40;
          }
        }

      }
    }


  }
</style>
